<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-s-order"></i> 点餐</h1>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(meal, index) in meals" :key="index">
            <el-card :body-style="{ padding: '0px' }" class="meal-card">
              <img :src="meal.image" :alt="meal.name" class="meal-image" />
              <div style="padding: 14px;">
                <h3>{{ meal.name }}</h3>
                <p>{{ meal.description }}</p>
                <p class="price">价格: {{ meal.price }}</p>
                <el-button type="primary" @click="addToOrder(meal)">添加到订单</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="50%">
          <el-table :data="order" style="width: 100%">
            <el-table-column prop="name" label="菜品名称" width="150" />
            <el-table-column prop="price" label="价格" width="100" />
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="small" type="danger" @click="removeFromOrder(scope.$index)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="order-total">
            总价: {{ totalPrice }}
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="orderDialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="placeOrder">下单</el-button>
          </span>
        </el-dialog>
        <el-button type="success" @click="orderDialogVisible = true" class="view-order-button">查看订单</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';

export default {
  name: 'OrderMeals',
  components: {
    AsideLayout
  },
  data() {
    return {
      meals: [
        { name: '宫保鸡丁', description: '经典川菜，辣味十足', price: '¥30', image: 'path/to/image1.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        { name: '麻婆豆腐', description: '麻辣鲜香', price: '¥25', image: 'path/to/image2.jpg' },
        // 更多菜品可以在这里添加
      ],
      order: [],
      orderDialogVisible: false
    };
  },
  computed: {
    totalPrice() {
      return this.order.reduce((total, meal) => total + parseFloat(meal.price.slice(1)), 0).toFixed(2);
    }
  },
  methods: {
    addToOrder(meal) {
      this.order.push(meal);
    },
    removeFromOrder(index) {
      this.order.splice(index, 1);
    },
    placeOrder() {
      console.log('下单:', this.order);
      this.order = [];
      this.orderDialogVisible = false;
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.meal-card {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.meal-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.meal-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.order-total {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.view-order-button {
  margin-top: 20px;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style> 